<!-- 考试主页面 -->
<template>
    <el-row style="height: 860px;">
        <el-col :span="17" style="margin-left: 20px; margin-top: -20px;">

            <el-col v-for="(item, index) in exams" :key="index" :span="16" :offset="index > 0 ? 2 : 2">
                    <el-card :body-style="{ padding: '20px' }" style="width: 800px;margin-top: 20px;margin-left: -70px;">
                        <div>
                           <span style="margin-left: 20px;font-size: 18px;">{{ item.title }}</span> 
                           <span style="margin-left: 440px;color: red;">时长：{{ item.longtime }}</span>
                        </div> <!-- 假设每个对象有一个imageUrl属性 -->
                        <div style="padding: 14px;margin-left: 6px;" >
                            <span >题目总数：{{ item.titlenum }}</span> <!-- 假设每个对象有一个title属性 -->
                            <span>总分数：{{ item.totlescore }}</span>
                            <span>及格分：{{ item.passScore }}</span>
                        </div>
                        <div>
                            <el-button type="success" style="padding-left: 70px;width: 100px;margin-left: 600px;">进入考试</el-button>
                        </div>
                    </el-card>
                </el-col>

        </el-col>
        <el-col :span="6" style="background-color: white;">
            <el-row>
                <h3 style="margin-top: 20px;margin-left: 20px;">精品推荐</h3>
                <el-col v-for="(item, index) in data" :key="index" :span="16" :offset="index > 0 ? 2 : 2">
                    <el-card :body-style="{ padding: '5px' }" style="width: 250px;margin-top: 20px;">
                        <img :src="item.imageUrl" class="image" /> <!-- 假设每个对象有一个imageUrl属性 -->
                        <div style="padding: 14px">
                            <span>{{ item.title }}</span> <!-- 假设每个对象有一个title属性 -->
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </el-col>
    </el-row>
</template>
<script setup>
import { ref } from 'vue'

//试卷======================
const exams = ref([{
    title: '测试试卷1',
    longtime: '60分钟',
    titlenum: '20',
    totlescore: '100',
    passScore: '60'
    
}])

//===========================
//精品推荐==================
const data = ref([{
    imageUrl: 'http://demo-mp3.oss-cn-shenzhen.aliyuncs.com/egg-edu-demo/5f63baebb94c35eab781.jpg',
    title: '',
}, {
    imageUrl: 'http://demo-mp3.oss-cn-shenzhen.aliyuncs.com/egg-edu-demo/5f63baebb94c35eab781.jpg',
    title: '',
}, {
    imageUrl: 'http://demo-mp3.oss-cn-shenzhen.aliyuncs.com/egg-edu-demo/5f63baebb94c35eab781.jpg',
    title: '',
}, {
    imageUrl: 'http://demo-mp3.oss-cn-shenzhen.aliyuncs.com/egg-edu-demo/5f63baebb94c35eab781.jpg',
    title: '',
}]) // 用于存储后端传回的数据  


// 在组件创建时发起HTTP请求获取数据
// function async created() {
//   try {
//     const response = await axios.get('/api/data') // 替换为你的后端API地址
//     data.value = response.data // 将获取到的数据赋值给data变量
//   } catch (error) {
//     console.error(error)
//   }
// }


//=================================
</script>
<style scoped>

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

</style>